<%@page import="com.honeycomb.utils.HoneyCombColumnIndicator"%>
<%@page import="com.honeycomb.vo.UserInfoVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" style="text/css" href="<%=request.getContextPath() %>/css/common.css">
<title>个人中心</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery/jquery-1.8.2.js"></script>
</head>

<script type="text/javascript">
	$(document).ready(function() {
		$('#info_nav_div_1').show();
		$('#info_nav_div_2').hide();
		$('#info_nav_div_3').hide();
		$('#info_nav_div_4').hide();
	});
	
	function changeInfoPanel(nav) {
		var navId = nav.id;
		$('#nav_bar_div > div').css("background-color","#AAAAAA");
		$('#'+navId).css("background-color","#999999");
		$('#info_nav_div_1').hide();
		$('#info_nav_div_2').hide();
		$('#info_nav_div_3').hide();
		$('#info_nav_div_4').hide();
		$('#info_'+navId).show();
	}
	
	function updateUserInfo() {
		var userId = $('#userId').val();
		var userNickname = $('#userNickname').val();
		var userSex = $('input[name="userSex"]:checked').val();
		$.ajax({
			url: '<%=request.getContextPath() %>/ajaxUpdateUserInfo.action',
			data: {
				"userId":userId,
				"userNickname":userNickname,
				"userSex":userSex
			},
			type: 'post',
			async: false,
			dataType: 'json',
			success: function(res) {
				var rs = res.result;
				if(rs == 0) {
					alert("恭喜你，用户基本信息修改成功！");
					window.location.reload();
				}else {
					alert("对不起，用户基本信息修改失败！");
					window.location.reload();
				}
			}
		});
	}
	
	function updateUserPassword() {
		var userId = $('#userId').val();
		var passwordValue = $('#passwordValue').val();
		var newPasswordValue = $('#newPasswordValue').val();
		var reNewPasswordValue = $('#reNewPasswordValue').val();
		$.ajax({
			url: '<%=request.getContextPath() %>/ajaxUpdateUserPassword.action',
			data: {
				"userId":userId,
				"passwordValue":passwordValue,
				"newPasswordValue":newPasswordValue
			},
			type: 'post',
			async: false,
			dataType: 'json',
			success: function(res) {
				var rs = res.result;
				if(rs == 0) {
					alert("恭喜你，密码修改成功！");
					window.location.reload();
				}else {
					alert("对不起，密码修改失败！");
					window.location.reload();
				}
			}
		});
	}
	
</script>

<%
	UserInfoVO userInfoVO = (UserInfoVO)session.getAttribute(SystemConstants.HoneyComb_LoginUser_Session_Name);
%>

<body>
<%@ include file="top.jsp" %>
<div class="margin_10"></div>
<input id="userId" value="<%=userInfoVO.getUserId() %>" type="text" style="display: none;">
<div class="body_div">
	<div id="nav_bar_div" style="width: 100%;height: 40px;text-align: left;background-color: #DDDDDD;border-bottom: 1px solid gray;">
		<div id="nav_div_1" onclick="changeInfoPanel(this)" style="float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;background-color: #999999;cursor: pointer;">
			基本资料
		</div>
		<div id="nav_div_2" onclick="changeInfoPanel(this)" style="float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;background-color: #AAAAAA;cursor: pointer;">
			修改资料
		</div>
		<div id="nav_div_3" onclick="changeInfoPanel(this)" style="float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;background-color: #AAAAAA;cursor: pointer;">
			修改头像
		</div>
		<div id="nav_div_4" onclick="changeInfoPanel(this)" style="float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;background-color: #AAAAAA;cursor: pointer;">
			修改密码
		</div>
	</div>
	<div id="info_nav_div_1" style="display: none;">
		用户头像：<img alt="" src="<%=request.getContextPath()+"/"+userInfoVO.getUserHeadImgUrl()%>"><br>
		用户ID:<%=userInfoVO.getUserId() %><br>
		用户昵称：<%=userInfoVO.getUserNickname() %><br>
		用户性别：<%=userInfoVO.getUserSex() %><br>
	</div>
	<div id="info_nav_div_2" style="display: none;">
		用户ID:<%=userInfoVO.getUserId() %><br>
		用户昵称：<input id="userNickname" value="<%=userInfoVO.getUserNickname() %>"><br>
		用户性别：<%
					if(userInfoVO.getUserSex().equals("m")) {
				%>
					<input name="userSex" type="radio" value="male" checked="checked">♂<input name="userSex" type="radio" value="female">♀<br>
				<%
					}else {
				%>
					<input name="userSex" type="radio" value="male">♂<input name="userSex" type="radio" checked="checked" value="female">♀<br>
				<%	
					}
				%>
					
		
		<input type="button" onclick="updateUserInfo()" value="提交修改">
	</div>
	<div id="info_nav_div_3" style="display: none;">
		用户头像：<img alt="" src="<%=request.getContextPath()+"/"+userInfoVO.getUserHeadImgUrl()%>"><br>
	</div>
	<div id="info_nav_div_4" style="display: none;">
		用户ID:<%=userInfoVO.getUserId() %><br>
		当前密码：<input id="passwordValue" type="password"><br>
		新密码：<input id="newPasswordValue" type="password"><br>
		重复新密码：<input id="reNewPasswordValue" type="password"><br>
		<input type="button" onclick="updateUserPassword()" value="提交修改">
	</div>
</div>
<%@ include file="foot.jsp" %>
</body>
</html>